<template>
  <a-layout-content>
    <back-bar-header text="账号中心"></back-bar-header>
    <a-layout
      class="message-container"
      :style="{ height: `${clientHeight - 188}px` }"
    >
      <a-layout-sider class="sider-menu">
        <a-menu v-model="noticeType" style="width: 200px;" mode="vertical">
          <a-menu-item :key="0"
            ><router-link to="/user/infos">个人信息</router-link></a-menu-item
          >
          <a-menu-item :key="1"
            ><router-link to="/user/security-settings">账户安全</router-link>
          </a-menu-item>
          <a-menu-item :key="2">
            <router-link to="/user/messages-settings"
              >系统/消息设置
            </router-link></a-menu-item
          >
        </a-menu>
      </a-layout-sider>
      <a-layout-content
        class="security-settings-content"
        style="background: #fff; margin-right: 0;"
      >
        <span class="security-settings">账户安全</span>
        <a-divider></a-divider>
        <div class="settings-option-row">
          <div style="width: 300px;">
            <div class="settings-top">手机号码</div>
            <div class="settings-bottom">
              {{
                phone === ''
                  ? '/'
                  : `${phone.replace(/^(\d{3})\d{6}(\d+)/, '$1******$2')}`
              }}
            </div>
          </div>
          <div>
            <a @click="clickChangePhone">{{
              phone === '' ? '绑定' : '更改'
            }}</a>
            <change-phone
              ref="changePhone"
              :phone="phone"
              :change-phone-modal-visible="changePhoneModalVisible"
              @close-change-phone-modal="closeChangePhoneModal"
              @get-user-info="getUserInfo"
            ></change-phone>
          </div>
        </div>
        <!-- <a-divider style="margin: 0 16px;"></a-divider>
        <div class="settings-option-row">
          <div style="width: 300px;">
            <div class="settings-top">邮箱</div>
            <div class="settings-bottom">
              {{
                email === ''
                  ? '未绑定，绑定后获得更好体验'
                  : `${email.replace(/(.{0,3}).*@(.*)/, '$1***@$2')}`
              }}
            </div>
          </div>
          <div>
            <a v-if="email === ''" @click="clickChangeEmail">绑定</a>
            <div v-else style="width: 80px;">
              <a @click="clickChangeEmail">更改</a>
              <a-divider type="vertical"></a-divider>
              <a style="margin-left: 4px;" @click="clickUnboundEmail">解绑</a>
            </div>
            <a-modal
              title="绑定邮箱"
              :visible="changeEmailModalVisible"
              :confirm-loading="false"
              ok-text="绑定"
              cancel-text="取消"
              @ok="clickToBindEmail"
              @cancel="closeChangeEmailModal"
            >
              <p
                style="
                  letter-spacing: 1px;
                  margin-bottom: 24px;
                "
              >
                请输入您要绑定的邮箱地址
              </p>
              <p
                style="
                  color: #5d637e;
                  font-weight: 500;
                  letter-spacing: 1px;
                "
              >
                邮箱地址
              </p>
              <a-input
                style="height: 40px; margin: 0 0 10px;"
                placeholder="请输入有效的邮箱地址"
              ></a-input>
              <p
                style="
                  color: #222432;
                  font-size: 12px;
                  letter-spacing: 1.12px;
                "
              >
                注意
              </p>
              <p class="modal-notice">
                1、网络通讯异常可能会造成短信丢失，请重新获取或稍后再试。<br />
                2、请核实手机是否已欠费停机，或者屏蔽了系统短信。<br />
                3、如果手机已丢失或停用，请选择其他验证方式。
              </p>
            </a-modal>
          </div>
        </div> -->
        <a-divider style="margin: 0 16px;"></a-divider>
        <div class="settings-option-row">
          <div style="width: 300px;">
            <div class="settings-top">登陆密码</div>
            <div class="settings-bottom">{{ `${'已设置'}` }}</div>
          </div>
          <div>
            <a @click="clickChangePassword">更改</a>
            <forget-password
              :user-phone="phone"
              :forget-password-modal-visible="forgetPasswordModalVisible"
              @close-forget-password-modal="closeForgetPasswordModal"
            ></forget-password>
          </div>
        </div>
        <a-divider style="margin: 0 16px;"></a-divider>
      </a-layout-content>
    </a-layout>
  </a-layout-content>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import UserStore from '@/store/modules/user'
import { getUserInfoById } from '@/api/user'
import { getImageCaptchaCode } from '@/api/sms'
import ForgetPassword from '@/components/login/ForgetPassword.vue'
import ChangePhone from '@/components/account/ChangePhone.vue'
import BackBarHeader from '@/components/home/BackBarHeader.vue'

@Component({
  components: { ForgetPassword, ChangePhone, BackBarHeader },
})
export default class PersonalInformationView extends Vue {
  private form: any
  private phone: string = ''
  private email: string = ''
  private noticeType: Array<number> = [1]
  private clientHeight = document.body.clientHeight
  // 点击更改手机号
  private changePhoneModalVisible: boolean = false
  // 点击更改邮箱地址
  private changeEmailModalVisible: boolean = false
  // 点击更改密码
  private forgetPasswordModalVisible: boolean = false
  // 图片验证码base64编码
  private captchaCode: string = ''
  // 图片验证码输入
  private captcha: string = ''

  get id() {
    return UserStore.currentUser?.id
  }

  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'login_form' })
  }

  created() {
    if (UserStore.currentUser?.id) {
      this.getUserInfo(UserStore.currentUser?.id)
    }
  }

  mounted() {
    window.addEventListener('resize', () => {
      this.clientHeight = document.body.clientHeight
    })
  }

  // 关闭更改邮箱地址对话框
  public closeChangeEmailModal() {
    this.changeEmailModalVisible = false
  }

  // 更改邮箱地址
  public clickToBindEmail() {
    this.$message.info('暂无接口')
    this.changeEmailModalVisible = false
  }

  // 打开更改邮箱地址对话框
  public clickChangeEmail() {
    this.changeEmailModalVisible = true
  }

  // 打开解绑邮箱地址对话框
  public clickUnboundEmail() {
    this.$confirm({
      title: '确定要解绑邮箱吗？',
      content: '解绑后將不能用邮箱进行登录',
      onOk: () => this.unboundEmail(),
    })
  }

  // 解绑邮箱地址
  public unboundEmail() {
    this.$message.info('暂无接口')
  }

  // 关闭更改密码对话框
  public closeForgetPasswordModal() {
    this.forgetPasswordModalVisible = false
  }

  // 打开更改密码对话框
  public clickChangePassword() {
    this.forgetPasswordModalVisible = true
  }

  // 关闭更改手机号对话框
  public closeChangePhoneModal() {
    this.changePhoneModalVisible = false
  }

  // 打开更改手机号对话框
  public clickChangePhone() {
    this.changePhoneModalVisible = true
    this.$nextTick(() => {
      ;(this.$refs.changePhone as any)?.initModalValue()
    })
  }

  // 刷新图片验证码
  public async refreshCaptchaCode() {
    const result = await getImageCaptchaCode({ data: this.phone })
    this.captchaCode = result.data.result
    console.log(this.captchaCode)
  }

  public async getUserInfo(id: any) {
    id = id || this.id
    const result = await getUserInfoById({ data: { id } })
    const userInfo = result.data.result
    this.phone = userInfo.phone
    this.email = userInfo.email
  }

  @Watch('id')
  queryInfoById(newValue: any) {
    this.getUserInfo(newValue)
  }
}
</script>

<style lang="less" scoped>
@import '@/constants';

.ant-layout-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 13px 16px 16px;
}

.sider-menu {
  height: 100px;
  margin-top: 12px;
}

li {
  text-align: center;
}

.ant-menu-vertical > .ant-menu-item {
  color: #909198;
  font-size: 16px;
  font-weight: 400;
  height: 50px;
  letter-spacing: 1px;
  line-height: 50px;
  margin: 0;
  width: 200px;
}

.ant-menu-vertical .ant-menu-item:not(:last-child) {
  border-bottom: 1px solid #e9e9e9;
  margin: 0;
}

.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background: #fff;
  border-left: 4px solid #6973ff;
  color: #373b52;
  font-size: 16px;
  font-weight: 500;
  height: 50px;
  letter-spacing: 1px;
  line-height: 50px;
  padding-left: 12px;
  width: 200px;
}

.ant-menu-item,
.ant-menu-submenu-title {
  transition: none;
}

.ant-divider-horizontal {
  margin: 0;
}

.ant-divider-vertical {
  margin-right: 5%;
}

.security-settings {
  color: #5d637e;
  font-size: 16px;
  font-weight: 500;
  height: 52px;
  letter-spacing: 1px;
  line-height: 52px;
  margin-left: 24px;
  padding-right: 12px;
}

.settings-option-row {
  align-items: center;
  display: flex;
  margin: 12px 24px;
}

.settings-top {
  color: #373b52;
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.settings-bottom {
  color: #222432;
  font-size: 12px;
  letter-spacing: 1.12px;
  opacity: 0.5;
}

.modal-notice {
  color: #222432;
  font-size: 12px;
  letter-spacing: 1.12px;
  line-height: 18px;
  opacity: 0.5;
}
</style>
